<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="inp">

    <script src="../../js/jquery.3.5.1.js"></script>
    <script>
        // ------------------------防抖---------------------------
        var debounce = (fn, ...args) => {
            console.log("this1", this); // 这个this指向的是window，因为debounce方法在引用的时候被调用了，所以他的this指向的是window
            let timeout = null; // 创建一个标记用来存放定时器的返回值
            return function () {
                // console.log(timeout)
                console.log("this2",
                this); // debounce函数执行之后的返回值，这就相当于是响应的事件绑定的就是这个返回的方法，所以他的this就是最先绑定事件的DOM元素。
                clearTimeout(timeout); // 保证用户输入完之后只有一个setTimeout
                timeout = setTimeout(() => {
                    fn.call(this, arguments, args);
                }, 500);
            };
        }

        function sayHi(e, args) {
            console.log(this, e, args);
            console.log('防抖成功');
        }
        var inp = document.getElementById('inp');
        // inp.addEventListener('input', debounce(sayHi)); // 防抖
        inp.oninput = debounce(sayHi)
        // ------------------------防抖---------------------------

        // ------------------------节流---------------------------
        function reduce(fn, wait = 500) {
            let on = true
            return function () {
                if (!on) return false
                on = false
                fn.apply(this, arguments)
                setTimeout(() => {
                    on = true
                }, wait)
            }
        }

        function size(e) {
            console.log(e.target.innerHeight)
        }
        window.onresize = reduce(size);
        // window.addEventListener('resize',size);
        // ------------------------节流---------------------------
    </script>
</body>

</html>